<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                template="./template/template.xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core">

    <ui:define name="content">
        <p:panel header="User overview">
            <script type="text/javascript">
                function handleComplete(xhr, status, args) {
                    if(!args.validationFailed) {
                        dialogvar.hide();
                    }
                }
            </script>
            <h:form id="form">
                <p:dataTable id="table" value="#{mbUser.listUser}" var="user"
                             selectionMode="single" rowKey="#{user.idUserAccess}"
                             widgetVar="tableVar"
                             paginator="true" paginatorPosition="bottom" paginatorAlwaysVisible="false"
                             rows="10" rowsPerPageTemplate="10,20,30"
                             emptyMessage="No one Accaunt available   ">
                    <p:column headerText="ID"
                              style="text-align: center"
                              width="50"
                              sortBy="#{user.idUserAccess}">
                        <h:outputText value="#{user.idUserAccess}"/>
                    </p:column>
                    <p:column headerText="User" style="text-align: center"
                              sortBy="#{user.transFullName}">
                        <p:commandLink  ajax="false" immediate="true"
                                        action="#{mbUser.navigationToUpdateUser(user)}"  value="#{user.transFullName}">
                        </p:commandLink>
                    </p:column>
                    <p:column headerText="Username" style="text-align: center">
                        <h:outputText value="#{user.userName}"/>
                    </p:column>
                    <p:column headerText="Date created" style="text-align: center">
                        <h:outputText value="#{user.dateCreated}">
                            <f:convertDateTime pattern="dd.MM.yyyy"/>
                        </h:outputText>
                    </p:column>
                    <p:column headerText="Active" style="text-align: center">
                        <p:commandLink actionListener="#{mbUser.changeActiveStatus(user)}" update="table">
                            <h:graphicImage  value="#{user.transActiveIcon}"/>
                        </p:commandLink>
                    </p:column>
                    <p:column style="text-align: center">
                        <p:commandLink actionListener="#{mbUser.prepareUserForDelete(user)}"
                                       id="deleteUser" oncomplete="dialogConfirmVar.show()"
                                       process="@this" update=":formdialog:dialogconfirm">
                            <h:graphicImage  value="icons/delete.png"/>
                        </p:commandLink>
                    </p:column>
                </p:dataTable>
            </h:form>
            <h:form id="formdialog">
                <p:confirmDialog id="dialogconfirm" message="Are you sure that you want to delete this user ?"
                                 header="Confirm" severity="alert" widgetVar="dialogConfirmVar">  
                    <p:commandButton id="confirm" value="Yes " update=":form:table,formdialog" oncomplete="dialogConfirmVar.hide()"  
                                     actionListener="#{mbUser.deleteUser()}" process="@this" />  
                    <p:commandButton id="decline" value="No " onclick="dialogConfirmVar.hide()" type="button" />   
                </p:confirmDialog>
            </h:form>
        </p:panel>
    </ui:define>
</ui:composition>
